<template>
	<view>
		<view class="container">
			<!-- 导航栏 -->
			<navView  title="大宗采购绩效评价系统"></navView>
			 
			<!-- 图表 -->
			<view class="chartPart">
				<view class="chartPart-chooseTime">
					<chooseTime ref="chooseTimeRef" @curTimeChange="curTimeChange"></chooseTime>
				</view>
				<view class="chartPart-chart">
					<au-chartLine :chartLineData="lineData"></au-chartLine>
				</view>
				<view class="chartPart-moreDetailBtn" @click="toMoreDetail">更多详情</view>
			</view>
			
			<!-- 列表 -->
			<view class="listPart">
				 <view v-for="(item,index) in nearlyTwoDaysOrderList">
				 	<materialCell :item="item" :isEvaluation="true" @itemClick="itemClick"></materialCell>
				 </view>
			</view>
		</view>

		<!-- tabbar -->
		<u-tabbar v-model="currentTabbarIndex" :list="tabbarLists" icon-size="30" active-color="#0672BF" @change="tabbarChange">
		</u-tabbar>
	</view>
</template>

<script>
	import materialCell from '../components/materialCell.vue'
	import chooseTime from '../components/chooseTime.vue'
	import navView from '../components/navView.vue'
	export default {
		components:{
			materialCell,
			chooseTime,
			navView,
		},
		data() {
			return {
				//底部tabbar当前选中的index
				currentTabbarIndex: 1,
				tabbarLists: [{
					iconPath: "../../../../../static/img/largeProcurement/tabbar_largeProcurement.png",
					selectedIconPath: "../../../../../static/img/largeProcurement/tabbar_largeProcurement_selected.png",
					text: '大宗采购',
				}, {
					iconPath: "../../../../../static/img/largeProcurement/tabbar_evaluation.png",
					selectedIconPath: "../../../../../static/img/largeProcurement/tabbar_evaluation_selected.png",
					text: '绩效评价',
				}],
				//折线图数据
				lineData: {},
				//近两天所有的订单物料
				nearlyTwoDaysOrderList: []
			}
		},
		onLoad() {
			this.requestLineData();
			this.requestNearlyTwoDaysOrder();
		},
		methods: {
			//查询折线图数据
			requestLineData() {
				this.$nextTick(function(){
					let params = {
						dateType: this.$refs.chooseTimeRef.curTimeType,
						time: this.$refs.chooseTimeRef.selectedTime,
					};
					this.$u.api.requestLineData(params).then(res => {
							let data = res;
							let dateTimeList = [];
							let societyList = [];//社会平价数据
							let companyList = [];//企业数据
							let inquireList = [];//询价-社会指导数据
							let yAxisDataList = [];
							for (let item of data) {
								dateTimeList.push(item.dateTime);
								societyList.push(item.society);
								companyList.push(item.company);
								inquireList.push(item.inquire);
							}
							let societyData = {
								color: '#0989FF',
								data:societyList
							}
							let companyData = {
								color: '#2BC157',
								data:companyList
							}
							let inquireData = {
								color: '#FCCD19',
								data:inquireList
							}
							yAxisDataList.push(companyData, societyData, inquireData);
							this.lineData = {
								legendData: ['企业', '社会平价', '社会指导指数'],
								xAxisDataList: dateTimeList,
								yAxisDataList: yAxisDataList
							}
						
					}).catch(err => {
						console.error(err)
					})
				})
			},
			
			//查询近两天所有的订单物料
			requestNearlyTwoDaysOrder() {
				this.$u.api.requestNearlyTwoDaysOrder().then(res => {
					this.nearlyTwoDaysOrderList = res;
				}).catch(err => {
					console.error(err)
				})
			},
			//更多详情
			toMoreDetail() {
				uni.navigateTo({
					url: 'priceTrend/priceTrend',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			//当前时间改变的回调
			curTimeChange() {
				this.requestLineData();
			},
			
			//cell点击事件
			itemClick(selectedItem) {
				uni.navigateTo({
					url: './priceTrend/materialOrderDetail?material=' + JSON.stringify(selectedItem),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			tabbarChange(index) {
				if (index == 0) {
					uni.redirectTo({
						url: '../index',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F5F5;
	}
	/* 上部图表部分 */
	.chartPart {
		background-color: #FFFFFF;
		padding-top: 43rpx;
		padding-bottom: 5rpx;
	}

	.chartPart-chooseTime {
		height: 50rpx;
		margin-bottom: 30rpx;
		margin: 0rpx 30rpx 43rpx 30rpx;
		z-index: 1;
	}

	.chartPart-chart {

	}

	.chartPart-moreDetailBtn {
		width: 200rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #4EAAE6 0%, #0672BF 100%);
		border-radius: 10rpx;
		margin: 30rpx auto;
		text-align: center;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}

	/* 底部列表部分 */
	.listPart {
		/* height: 535rpx; */
	}
</style>
